<template>
    <div class='box'>
        <div class="add-box">
            <h4>请输入文章相关信息</h4>
            <div class="name">
                <h6>文章标题</h6>
                <el-input v-model="input" placeholder="请输入文章标题" />
            </div>
            <div class="material">
                <h6>文章封面</h6>
                <el-upload
                    class="avatar-uploader"
                    action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload"
                >
                    <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                    <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
                </el-upload>
            </div>
            <div class="explain">
                <h6>文章描述</h6>
                <el-input v-model="input" placeholder="请输入描述" />
            </div>
            <div class="content">
                <h6>文章内容</h6>
                <el-input v-model="input" placeholder="请输入内容" />
            </div>
            <div class="btn">
                <el-button type="primary" class='confirm' color='#2bc17b'>确认</el-button>
                <el-button type="primary" plain class='cancel' color='#2bc17b'>取消</el-button>
            </div>
        </div>
    </div>
</template>

<script>
    
</script>

<style lang="less" scoped>
.box{
    background: rgba(255, 255, 255, 1);
    .add-box{
        width:1184px;
        box-sizing:border-box;
        padding:50px 0 0 60px;
        h4{
            font-size: 16px;
            font-weight: 400;
            letter-spacing: 0px;
            line-height: 23.17px;
            color: rgba(153, 153, 153, 1);
            text-align: left;
        }
        .name{
            display:flex;
            margin-top:28px;
            align-items:center;
            .el-input{
                width: 344px;
                height: 40px;
                opacity: 1;
                border-radius: 4px;
                border: 1px solid rgba(184, 196, 209, 1);
                margin-left:30px;
            }
            h6{
                font-size: 16px;
                font-weight: 400;
                letter-spacing: 0px;
                line-height: 23.17px;
                color: rgba(51, 51, 51, 1);
                text-align: left;
                vertical-align: top;
            }
        }
        .material{
            margin-top:40px;
            display:flex;
            align-items:start;
            h6{
                font-size: 16px;
                font-weight: 400;
                letter-spacing: 0px;
                line-height: 23.17px;
                color: rgba(51, 51, 51, 1);
                text-align: left;
                margin-right:30px;
            }
            .avatar-uploader  {
                width: 225px;
                height: 110px;
                display: block;
                border: 1px solid rgba(184, 196, 209, 1);
            }
            .avatar-uploader .el-upload:hover {
                border-color: gray;
            }

            .el-icon.avatar-uploader-icon {
                font-size: 28px;
                color: #8c939d;
                width: 225px;
                height: 110px;
                text-align: center;
            }
        }
        .explain{
            margin-top:40px;
            display:flex;
            align-items:center;
            h6{
                font-size: 16px;
                font-weight: 400;
                letter-spacing: 0px;
                line-height: 23.17px;
                color: rgba(51, 51, 51, 1);
                text-align: left;
                vertical-align: top;
            }
            .el-input{
                width: 600px;
                height: 90px;
                opacity: 1;
                border-radius: 4px;
                border: 1px solid rgba(184, 196, 209, 1);
                margin-left:30px;
            }
        }
        .content{
            margin-top:40px;
            display:flex;
            align-items:center;
            h6{
                font-size: 16px;
                font-weight: 400;
                letter-spacing: 0px;
                line-height: 23.17px;
                color: rgba(51, 51, 51, 1);
                text-align: left;
                vertical-align: top;
            }
            .el-input{
                width: 900px;
                height: 160px;
                opacity: 1;
                border-radius: 4px;
                border: 1px solid rgba(184, 196, 209, 1);
                margin-left:30px;
            }
        }
        .btn{
            margin-left:110px;
            margin-top:40px;
            .el-button{
                width: 76px;
                height: 40px;
                color:white;
                &:last-child{
                    background:white;
                    margin-left:24px;
                    color:rgba(43, 193, 123, 1);
                }
            }
            .confirm{
                margin-right:24px;
            }
        }
    }
}
</style>